<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">single page</div>
</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    var Login={
        template:`
        <div>
            <div>
             i am login page{{query}}
            </div>
        </div>
            `,
            data:function(){
                return {msg:''}
            },
            created:function(){
                this.msg=this.$route.query.id
            }

            
    }
   
    var Register={
        template:`
        <div>
            <div>
             i am register page{{ $route.params.name}}
            </div>
        </div>
            `,
            //在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，
            //限制了其灵活性。使用 props 可 将组件和路由解耦
            // props:['name'],这样也可以获得参数，更容易
            // props:['name'],
            // data:function(){
            //     return {name:''}
            // },

            //可在this.$route.params.name获得参数
            // created:function(){
            //     this.name=this.$route.params.name
            // }
    }
    Vue.use(VueRouter);
    var router=new VueRouter({
        routes:[
            

        //传参数的2个场景，查询传参和参数传参。
            {path:'/login',name:'login',component:Login},
             //一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，
            //参数值会被设置到 this.$route.params，可以在每个组件内使用，可以看到在register模板里直接使用
            {path:'/register/:name',name:'register',component:Register}
    ]

    });
    new Vue({
        el:'#app',
        router,
        // $route.fullPath传入完整的路径，可以避免因相同路由不同传输导致页面不刷新
        template:`
        <div>
            <router-link :to="{name:'login',query:{id:'123'}}">go login</router-link>
            <router-link :to="{name:'register',params:{name:'bob'}}">go register</router-link>
            <button @click='gologin'> go login</button>

            
             <router-view :key='$route.fullPath'></router-view>
        </div>
        
        `,
        methods:{
            gologin:function(){
                this.$router.push({name:'login',query:{id:'456'}})
            }
        }
    })
</script>
</html>